<template>
	<view class="container">
		<!-- <u-navbar title="" @leftClick="goreturn" :autoBack="true"></u-navbar> -->
		<view class="flexcenter" style="margin-top: 100rpx;">
			<image src="@/static/logo.png" style="width: 440rpx;height: 400rpx;" mode=""></image>
		</view>
		<view class="name flexcenter"> 會員註冊 </view>
		<view class="item">
			<view class="left">行動電話</view>
			<input type="number" v-model="mobile" maxlength="10" placeholder-style="color:#999" class="ipt"
				placeholder="請您輸入行動電話" />
		</view>
		<!-- 驗證碼 -->
		<view class="item">
			<view class="left">驗證碼</view>
			<input type="number" v-model="code" maxlength="6" class="ipt" placeholder-style="color:#999"
				placeholder="請輸入驗證碼" />
			<view class="get-code" v-if="codeTime == 60" @click="getCode">獲取驗證碼</view>
			<view class="get-code" v-else>{{ codeTime }}s後重新發送</view>
		</view>
		<view class="item">
			<view class="left">密碼</view>
			<input type="password" v-model="password" maxlength="12" class="ipt" placeholder-style="color:#999"
				placeholder="請輸入自設密碼(6~12位)" />
		</view>
		<view class="btn" @tap="userLogin()">下一步</view>
		<view class="zw" @click="tologin()"> 有帳號，去登錄> </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isHidePwd: true,
				mobile: "", //行動電話
				password: "", //密碼
				code: "", //驗證碼
				isClick: true,
				codeTime: 60, //倒計时時間
				codetext:"",//正确驗證碼
			};
		},
		onLoad() {},
		methods: {
			goreturn() {
				uni.navigateBack(1)
			},
			//去登錄
			tologin() {
				uni.navigateTo({
					url: "/pages/login/login",
				});
			},
			// 獲取驗證碼
			getCode() {
				if (!this.mobile) {
					this.http.toast("請輸入行動電話！")
					return false
				}
				if (this.mobile.length!=10) {
					this.http.toast("請輸入10码行動電話！")
					return false
				}
				if (this.isClick) {
					this.isClick = false;
					
					let data = {
						mobile: this.mobile,
						event:"register"
					};
					uni.showLoading({
						mask:true,
						title:"請稍後"
					})
					this.http.request("/api/sms/fs", 'POST', data).then((res) => {
						if (res.code == 1) {
							uni.hideLoading()
							this.downTime();
							uni.showToast({
								title: "發送成功",
								icon: "none",
							});
							this.codetext = res.data
						} else {
							uni.hideLoading()
							this.isClick = true;
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
					});
				}
			},
			// 發送驗證碼倒計时
			downTime() {
				if (this.codeTime == 0) {
					this.codeTime = 60;
					this.isClick = true;
					return;
				} else {
					this.codeTime--;
					this.isClick = false;
					setTimeout(() => {
						this.downTime();
					}, 1000);
				}
			},

			// 點擊註冊按钮
			userLogin() {
				this.codeLogin();
			},
			async codeLogin() { //註冊
				if (!this.mobile) {
					this.http.toast("請輸入行動電話")
					return false
				}
				if (!this.code) {
					this.http.toast("請輸入驗證碼")
					return false
				}
				// if(this.codetext != this.code){
				// 	this.http.toast("驗證碼錯误！")
				// 	return false
				// }
				if (!this.password) {
					this.http.toast("請輸入自設密碼(6~12位)")
					return false
				}
				let res=await this.http.request('/api/user/register', 'POST', {
					mobile: this.mobile,
					code: this.code,
					password:this.password,
					invite_code:uni.getStorageSync("other_invite_code")
				})
				if (res.code == 1) {
					this.http.toast(res.msg);
					let userinfo = res['data']['userinfo'];
					// 存
					uni.setStorageSync('token', userinfo['token']);
					uni.setStorageSync('user_id', userinfo['user_id']);
					setTimeout(() => {
						uni.reLaunch({
							url:"/pages_mine/personInformation?type=1"
						})
					}, 1000)
				}else{
					this.http.toast(res.msg);
				}
				// this.http.post("user/register", param).then((res) => {
				// 	if (res.code == 1) {
				// 		uni.showToast({
				// 			title: "註冊成功",
				// 			icon: "none",
				// 		});
				// 		setTimeout(function() {
				// 			uni.reLaunch({
				// 				url: "./login",
				// 			});
				// 		}, 1500);
				// 	} else {
				// 		uni.showToast({
				// 			title: res.msg,
				// 			icon: "none",
				// 		});
				// 	}
				// });
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.container {
		position: relative;
		overflow: hidden;
	}

	.login-bg {
		width: 750rpx;
		height: 441rpx;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
	}

	.name {
		text-align: left;
		margin: 30rpx 30rpx 50rpx;
		font-size: 38rpx;
		font-weight: 550;
	}

	// 每個form项
	.item {
		width: 670rpx;
		height: 120rpx;
		// border-radius: 147rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		position: relative;
		// overflow: hidden;
		// line-height: 120rpx;
		border-bottom: 1px solid #efefef;

		.left {
			width: 130rpx;
			margin: 37rpx 0;
			text-align: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #111;
			border-right: 2rpx solid #cccccc;
		}

		.ipt {
			margin-left: 16rpx;
			flex: 1;
			border: 0 none;
			font-size: 32rpx;
			font-weight: 400;
		}

		.icon {
			position: absolute;
			right: 0;
			top: 2rpx;
			bottom: 33rpx;
			width: 38rpx;
			height: 38rpx;
		}

		.get-code {
			position: absolute;
			right: 35rpx;
			z-index: 99999999;
			font-size: 24rpx;
			line-height: 50rpx;
			color: #FFB800;
			font-family: PingFang SC;
			font-weight: 500;
			text-decoration: underline;
		}
	}

	// 註冊按钮
	.register-box {
		display: flex;
		justify-content: flex-end;
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 0 auto;

		.register-btn {
			font-size: 24rpx;
			font-weight: 500;
			height: 100%;
		}
	}

	// 登錄按钮
	.btn {
		margin: 80rpx auto 0;
		width: 670rpx;
		height: 95rpx;
		background: #FFB800;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: 400;
		text-align: center;
		line-height: 95rpx;
		color: #000000;
	}

	.quickxie {
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.quickxieText {
			display: flex;
			align-items: center;
		}

		.leftLine {
			width: 160rpx;
			height: 1rpx;
			background: #454954;
		}

		.rightLine {
			width: 160rpx;
			height: 1px;
			background: #454954;
		}
	}

	.zw {
		text-align: center;
		color: #3e5c92;
		margin-top: 15rpx;
	}
</style>